<template>
  <div class="userInfo">
    <van-nav-bar title="我的资料" @click-left="$router.back()">
      <template #left>
        <i class="iconfont icon-sdf" style="fontSize: 18px"></i>
      </template>
    </van-nav-bar>
    <van-cell-group class="avatar" >
      <van-cell
        title="头像"
        is-link
        center
        @click="$refs.upload.showUpload = true"
      >
        <template #default>
          <img :src="userInfo.avatar" alt="" class="icon" />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="info">
      <van-cell
        title="昵称"
        is-link
        :value="userInfo.nickname"
        @click="$router.push('/editInfo/nickname')"
      />
      <van-cell
        title="性别"
        is-link
        :value="
          userInfo.gender === 0 ? '未知' : userInfo.gender === 1 ? '男' : '女'
        "
        @click="showGender = true"
      />
      <van-cell
        title="地区"
        is-link
        :value="userInfo.area"
        @click="editCityList"
      />
      <van-cell
        title="个人简介"
        is-link
        :value="userInfo.intro"
        @click="$router.push('/editInfo/intro')"
      />
    </van-cell-group>
    <div class="btn">
      <van-button type="default" plain block @click="exit">退出登录</van-button>
    </div>
    <!-- 修改性别 -->
    <van-popup
      v-model="showGender"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        title="标题"
        show-toolbar
        :columns="gender"
        @confirm="onConfirmGender"
        @cancel="showGender = false"
        :default-index="userInfo.gender"
      />
    </van-popup>
    <!-- 修改城市 -->
    <van-popup v-model="showCity" position="bottom" :style="{ height: '40%' }">
      <van-area
        title="地区"
        :area-list="areaList"
        :columns-num="2"
        :value="code"
        @confirm="selectCity"
      />
    </van-popup>
    <!-- 上传头像 -->
    <upload ref="upload" :userInfo="userInfo" @editAvatar="editAvatar"></upload>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import city from '@/utils/cityData.js'
import { edit, info } from '@/api/api'
import upload from './com/upload.vue'
import { removeLocal } from '@/utils/local.js'
export default {
  components: {
    upload
  },
  data () {
    return {
      gender: ['未知', '男', '女'],
      showGender: false,
      showCity: false,
      areaList: {}, //  地区列表
      code: '',
      baseURL: process.env.VUE_APP_URL
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    // 选择性别
    onConfirmGender (value, index) {
      this.$store.state.userInfo.gender = index
      this.showGender = false
    },
    // 修改城市选择数据处理
    editCityList () {
      this.showCity = true
      this.areaList = {
        province_list: city.province_list,
        city_list: city.city_list
      }
      for (var key in city.city_list) {
        if (this.userInfo.area === city.city_list[key]) {
          this.code = key
        }
      }
    },
    // 修改城市选择
    async selectCity (value) {
      // console.log(value)
      this.userInfo.area = value[1].name
      await edit({ area: value[1].name })
      this.showCity = false
      this.$toast.success('修改成功')
    },
    // 修改头像
    async editAvatar (id) {
      await edit({ avatar: id })
      // console.log('res:', res)
      const res = await info()
      console.log(res)
      var userInfo = res.data.data
      userInfo.avatar = process.env.VUE_APP_URL + userInfo.avatar
      this.$store.commit('SETUSERINFO', userInfo)
    },
    // 退出登录
    exit () {
      removeLocal('heimamm_mobile_token')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.userInfo {
  /deep/.van-nav-bar__left {
    padding-left: 5px;
  }
  .avatar {
    // padding: 10px;
    margin-bottom: 8px;
    vertical-align: center;
    .icon {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .info {
    padding: 10px 0;
    /deep/.van-cell::after {
      border-bottom: none;
    }
    .van-cell {
      padding: 15px;
    }
  }
  .btn {
    padding: 15px;
    /deep/.van-button__text {
      color: #e4154e;
    }
  }
}
</style>
